<template>
  <view class="content">
    <u-toast ref="uToast"></u-toast>
    <u-navbar bgColor="transparent" placeholder fixed safeAreaInsetTop>
      <view
        class="u-nav-slot"
        slot="left"
        style="display: flex; align-items: center"
      >
        <u-icon @click="goBack" name="arrow-left" size="16"></u-icon>
        <u-line
          direction="column"
          :hairline="false"
          length="16"
          margin="0 8px"
        ></u-line>
        <u-icon @click="toHome" name="home" size="20"></u-icon>
      </view>
    </u-navbar>
    <view class="regBox loginBox">
      <view class="regTitle">
        <p>重置密码</p>
      </view>
      <view class="formBox">
        <view class="name">
          <text>手机号</text>
          <input
            type="number"
            placeholder="输入手机号"
            placeholder-style="fontSize:28rpx"
            v-model="phone"
          />
        </view>
        <view class="name">
          <text>短信验证码</text>
          <view class="">
            <input
              placeholder="请输入短信验证码"
              v-model="dxCode"
              type="number"
              placeholder-style="fontSize:28rpx"
            />
            <image
              @click="getDxCode"
              v-if="dxImg"
              :src="dxImg"
              mode="scaleToFill"
              style="width: 70px; height: 35px"
            />
          </view>
        </view>
        <view class="name">
          <text>验证码</text>
          <view class="">
            <input
              placeholder="请输入验证码"
              v-model="code"
              type="number"
              placeholder-style="fontSize:28rpx"
            />
            <p @click="getCode">
              {{ second > 0 ? `${second}秒后获取` : '获取验证码' }}
            </p>
          </view>
        </view>
        <view class="name">
          <text>新密码</text>
          <input
            type="password"
            placeholder="请设置新登录密码"
            v-model="password"
            placeholder-style="fontSize:28rpx"
          />
        </view>
        <view class="name">
          <text>确认密码</text>
          <input
            type="password"
            placeholder="再次输入"
            v-model="password1"
            placeholder-style="fontSize:28rpx"
          />
        </view>
      </view>
      <view class="loginBtn" @click="login"> 立即修改 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      code: '',
      second: 0,
      phone: '',
      password: '',
      password1: '',
      loadingShow: false,
      reg_tel:
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
      dxCode: '',
      uuid: '',
      dxImg: undefined,
    }
  },
  created() {
    this.getDxCode()
  },
  methods: {
    // 获取短信验证码
    async getDxCode() {
      this.dxCode = ''
      this.uuid = ''
      this.dxImg = ''
      const res = await uni.$api.getDxCode({ phone: '17333333333' })
      if (res.code === 200) {
        this.uuid = res.result.uuid
        this.dxImg = res.result.img
      }
    },
    login(e) {
      if (!this.reg_tel.test(this.phone))
        return this.showToast('请输入正确的手机号')
      if (!this.password.trim() || this.password.length < 6)
        return this.showToast('请输入您的密码并不少于6位')
      if (this.password !== this.password1)
        return this.showToast('输入的两次密码不同')
      if (!this.code) return this.showToast('请输入验证码')
      this.loadingShow = true
      uni.showLoading()
      this.$api
        .forgotPassword({
          username: this.phone,
          password: this.password,
          confirmPassword: this.password,
          smscode: this.code,
        })
        .then((res) => {
          uni.hideLoading()
          if (res.data.code == 200) {
            uni.showToast({
              title: '修改成功',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1500)
          } else {
            this.showToast(res.data.message)
            this.loadingShow = false
          }
        })
    },
    // 获取验证码
    getCode() {
      if (this.second == 0) {
				if (!this.dxCode) {
					return uni.showToast({
            icon: 'none',
            title: '短信验证码不能为空！',
          })
				}
        // 模拟向后端请求验证码
        if (uni.$u.test.mobile(this.phone) == false) {
          this.phone = ''
          uni.showToast({
            icon: 'none',
            title: '请输入正确的手机号',
          })
        } else {
          uni.showLoading()
          this.$api
            .agentIncomeCode({
              phone: this.phone,
              smsType: '1',
							uuid: this.uuid,
							yzmCode: this.dxCode
            })
            .then((res) => {
              uni.hideLoading()
              this.loadingShow = false
              // 这里此提示会被this.start()方法中的提示覆盖
              if (res.data.code === 0) {
                uni.$u.toast('验证码已发送')
                // 通知验证码组件内部开始倒计时
                this.second = 60
                let timer = setInterval(() => {
                  if (this.second <= 0) {
                    clearInterval(timer)
                    this.second = 0
                  } else {
                    this.second--
                  }
                }, 1000)
              } else {
                uni.$u.toast(res.data.message)
              }
            })
        }
      } else {
        uni.$u.toast('倒计时结束后再发送')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.regBox {
  width: 610rpx;
  margin: 0 auto;
  margin-top: 80rpx;

  .regTitle {
    > p:nth-child(1) {
      font-size: 50rpx;
      font-weight: bold;
    }

    > p:nth-child(2) {
      color: #999999;
      margin-top: 12rpx;
      font-size: 28rpx;
    }
  }

  .formBox {
    width: 100%;
    margin: 0 auto;
    margin-top: 80rpx;
    font-size: 28rpx;

    .name {
      margin-bottom: 37rpx;

      > input {
        margin-top: 5rpx;
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        margin-bottom: 37rpx;
        border-bottom: 1px solid #cccccc;
      }

      > view {
        width: 100%;
        height: 80rpx;
        margin-bottom: 37rpx;
        border-bottom: 1px solid #cccccc;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > p {
          background-color: #0355e5;
          padding: 8rpx 20rpx;
          color: #fff;
          font-size: 26rpx;
          border-radius: 26rpx;
        }
      }
    }
  }
}

.loginBtn {
  margin-top: 129rpx;
  width: 610rpx;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
  height: 90rpx;
  background: #0355e5;
  border-radius: 45rpx;
}
</style>
